<template>
  <el-button type="primary"
             icon="el-icon-sort"
             @click="handleSwitch">切 换</el-button>
  <br /><br />
  <avue-form :key="reload"
             v-model="form"
             :option="option">
  </avue-form>
</template>
<script>
export default {
  data () {
    return {
      reload: Math.random(),
      type: true,
      form: {
        name: '张三',
        sex: '男',
        username: 'smallwei',
        password: 'smallwei'
      },
      option: {},
      option1: {
        addBtn: false,
        column: [
          {
            label: '昵称',
            prop: 'name'
          }
        ]
      },
      option2: {
        addBtn: false,
        column: [
          {
            label: '用户名',
            prop: 'username'
          }, {
            label: '密码',
            prop: 'password',
            type: 'password'
          }, {
            label: '姓名',
            prop: 'name'
          }
        ]
      },
    };
  },
  mounted () {
    this.handleSwitch();
  },
  methods: {
    handleSwitch () {
      this.type = !this.type;
      if (this.type) {
        this.option = this.option1;
      } else {
        this.option = this.option2;
      }
      this.reload = Math.random();
    }
  }
}
</script>